<template>
  <view class="px-3 py-3 box-border">
    <view class="bgc c-pd mb-3">
      <view class="text">{{ data.points }} <text>积分</text></view>
      <view class="bill-entrance" @click="handleGotoPage">积分账单</view>
    </view>
    <view class="bgc c-pd mb-3">
      <view class="text">{{ data.oldBalance }} <text>养老金</text></view>
    </view>
    <view class="bgc c-pd mb-3">
      <view class="text">{{ data.pmcBalance }} <text>物业金</text></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import UserRequest from '@/request/userRequest';
import { navigate } from '@/utils/navigate';
interface IData {
  points: number;
  oldBalance: number;
  pmcBalance: number;
}

const data = reactive<IData>({
  points: 0,
  oldBalance: 0,
  pmcBalance: 0,
});

onLoad(() => {
  UserRequest.GetUserIntegralAccount({
    hasLoading: true,
  }).then((res) => {
    if (res.data) {
      data.oldBalance = res.data.oldBalance;
      data.pmcBalance = res.data.pmcBalance;
      data.points = res.data.points;
    }
  });
});

const handleGotoPage = () => {
  navigate({ url: '/subcontract/person/pointManagement/order' });
};
</script>

<style lang="scss" scoped>
.bgc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 200rpx;
  background: linear-gradient(-90deg, rgb(227 203 170), rgb(251 239 222 / 100%));
  border-radius: 20rpx;
  box-sizing: border-box;

  .text {
    font-size: 70rpx;
    font-weight: bold;

    text {
      font-size: 30rpx;
      font-weight: lighter;
    }
  }

  .bill-entrance {
    padding: 16rpx 40rpx;
    color: white;
    background: #c29869;
    border-radius: 100rpx;
  }
}
</style>
